<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
	</head>
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<link rel="shortcut icon" href="../images/titlelogo.png" type="image/x-icon" />
	
	<!-- <link rel="stylesheet" href="../css/font.css"> -->
	<!-- <link rel="stylesheet" href="../css/xadmin.css"> -->
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="../js/xadmin.js"></<!-- script>
	<!-- <script language="Javascript" src="../js/nicePage.js"></script> --> 
	<script src="../js/cpexcel.js"></script>
	<script src="../js/shim.js"></script>
	<script src="../js/jszip.js"></script>
	<script src="../js/xlsx.js"></script>

		
	<body  onload="load()">

	<table class="layui-hide" id="test" lay-filter="test"></table>
	
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
	    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
	    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
	    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
			 <button class="layui-btn layui-btn-sm" lay-event="del" id="deel">删除</button>
			 <div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em></em><i></i></div>
			 
	  </div>
	  
	 
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
			GGGG: <a href="javascript:;" data-page="2" class="layui-laypage-refresh"><i class="layui-icon layui-icon-refresh"></i></a>
	
			<script>
			 var data_json="";
									function load(){
									}
								
			 
							$.post("http://localhost:86/HBuilder/xops/Back.php",
							{
									 	 type:"User",
									 	 operation:"search",
									 	 token:"1ab66e59325257b60b971d4afa1505ce"
									 },function(data,status){
									 	// alert("data:"+(data));
									 	data_json=JSON.parse(data);
									 data_json=data_json["data"];
									 console.log(data_json)
									 // for(var i =0;i<2;i++)
									 // for(var j in data_json[i])
									 // alert("data:"+(data_json[i][j]));
									 })
				var pageSize = 5//每页显示数据条数
				var currentPageNo = 2;//当前页数
				var curr=0,nums=10;
				layui.use('table', function() {
					var table = layui.table;
					// table =  $.extend(table, {config: {checkName: 'checked'}}) 默认全选
					table.render({
						elem: '#test',
						// data: data_json,
						limit:10,
						url:"http://localhost:86/HBuilder/xops/Back.php",
						method:"post",
						where:{
							type:"User",
							operation:"search",
							curr:curr,
							nums:nums,
							token:"1ab66e59325257b60b971d4afa1505ce"
						},
						// contentType:"application/json",
						headers:{},//接口的请求头
						parseData: function(res){ //res 即为原始返回的数据
							// alert("dgf:"+ res.data);
							
							return {
							    "code": res.code, //解析接口状态
							    // "msg": res.message, //解析提示文本
							    "count": res.count, //解析数据长度
								
							    "data": res["data"] ,//解析数据列表
							  } 
								  },
						 request:  {
							
						  pageName: 'curr', //页码的参数名称，默认：page
						  limitName: 'nums' ,//每页数据量的参数名，默认：limit
						
						},		
						toolbar: '#toolbarDemo',
						title: '用户数据表',
						// count: 11,
						limit: 10,
						limits: [10, 20, 30],
						
						initSort: {
							field: 'id' //排序字段，对应 cols 设定的各字段名
								,
							type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
						},
						cols: [
							[
								{
									type: 'checkbox',
									id: "ee",
									fixed: 'left',
									// LAY_CHECKED: true
								}, {
									field: 'id',
									title: 'ID',
									width: 80,
									fixed: 'left',
									unresize: true,
									sort: true,
									minWidth: 50,
									width: '4%',
									// event:'ddd',
									
								}, {
									field: 'account',
									title: '用户名',
									minWidth: 120,
									width:'15%',
									edit: 'text',
							
								}
						
								, {
									field: 'password',
									title: '密码',
									minWidth: 120,
									width:'15%',
									edit: 'text',
									
									sort: true
								}
								, {
									field: 'tel',
									title: '电话',
									width: '15%',
									minWidth:120,
									edit: 'text',
									
									sort: true
								}, {
									field: 'datetime',
									title: '注册时间',
									minWidth: 150,
									width:'15%',
									edit: 'text',
								    minWidth:120,
									sort: true
								}
								
						
								, {
									fixed: 'right',
									title: '操作',
									toolbar: '#barDemo',
									width: 150
								}
							]
						],
						page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
							layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', "refresh"] //自定义分页布局
								,
							curr: 1 //设定初始在第 5 页
								,
							groups: 5 //只显示 1 个连续页码
								,
							first: true //不显示首页
								,
							last: true //不显示尾页
	
						},
	      done: function(res, curr, count){
	  //如果是异步请求数据方式，res即为你接口返回的信息。
	  //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	   var tableView = this.elem.next();
	  var totalRow = tableView.find('.layui-table-total');
	  var limit = this.page ? this.page.limit : this.limit;
	  layui.each(totalRow.find('td'), function (index, tdElem) {
	    tdElem = $(tdElem);
	    var text = tdElem.text();
	    if (text && !isNaN(text)) {
	      text = (parseFloat(text) / limit).toFixed(2);
	      tdElem.find('div.layui-table-cell').html(text);
	    }
	  });
	  console.log("res:",res);
	  
	  //得到当前页码
	  console.log("curr",curr); 
	  
	  //得到数据总量
	  console.log("co",count);
	  var sel=$("#sel").val()
	  console.log("sel",sel);
	    
	},
	
						defaultToolbar: ['filter', 'print', 'exports']
					});
	     var bol="";
					//头工具栏事件
					table.on('toolbar(test)', function(obj) {
						// obj.config.limit = 11;
						// alert("f:"+data.length)
						for (var i in obj)
							console.log("obj:", i, " ", obj[i])
						var checkStatus = table.checkStatus(obj.config.id);
		
						for (var i in checkStatus)
							console.log("pp", i, " ", checkStatus[i])
						for (var i in data)
							console.log("pp22", i, " ", data[i])
						switch (obj.event) {
							case 'getCheckData':
								var data = checkStatus.data;
	
								console.log("getCheckData")
								layer.alert(JSON.stringify(data));
								break;
							case 'getCheckLength':
							
								var data = checkStatus.data;
								for (var i in checkStatus)
									console.log("i", i, " ", checkStatus[i])
								console.log("getCheckLength")
								layer.msg('选中了：' + data.length + ' 个');
								break;
							case 'isAll':
								console.log("isAll")
								layer.msg(checkStatus.isAll ? '全选' : '未全选');
								break;
							
								
						};
					});
	 arr_obj=[];
	table.on('checkbox(test)', function(obj){
		
		  arr_obj.push(obj)
			  
	    });
	
					//监听行工具事件
					table.on('tool(test)', function(obj) {
						var data = obj.data;
						console.log("pp2:", data)
						if (obj.event === 'del') {
							// obj.del();
							layer.confirm('真的删除行么', function(index) {
								obj.del();
								layer.close(index);
								alert("g:" + index)
	
							});
							// 
						} else if (obj.event === 'edit') {
							// layer.prompt({
							//   formType: 2
							//   ,value: data.email
							// }, function(value, index){
							//   obj.update({
							//     email: value
							//   });
							// 
							//      layer.close(index);
							//    });
							layer.alert('编辑行：<br>' + JSON.stringify(data))
						}
					});
	
					//监听单元格编辑
					table.on('edit(test)', function(obj) {
						var value = obj.value //得到修改后的值
							,
							data = obj.data //得到所在行所有键值
							,
							field = obj.field; //得到字段
						layer.msg('[ID11: ' + data.id + '] ' + field + ' 字段更改为：' + value);
					});
	
	
	
					//监听表格复选框选择
					var checkedArr = [];
					
	
	
					//批量删除
					$("#deel").click(function() {
						var checkStatus = table.checkStatus("test");
						bol=checkStatus.isAll;
						alert("bol:"+bol)
						// for(var i in checkedArr)
						// 		console.log("checkedArr44:",i," ",checkedArr[i])
						var checkStatus = table.checkStatus('test'),
							data = checkStatus.data,
							tmpArr = [],
							ids = [];
						if (checkStatus.isAll) {
							for (var i = 0; i < data.length; i++) {
								checkedArr[data[i].id] = i;
								ids.push(data[i].id);
							}
							for (var i in checkedArr)
								console.log("checkedArr:", i, " ", checkedArr[i])
							for (var i in ids)
								console.log("ids:", i, " ", ids[i])
						} else {
							for (var i = 0; i < data.length; i++) {
								tmpArr[data[i].id] = checkedArr[data[i].id];
								ids.push(data[i].id);
							}
							checkedArr = tmpArr;
							for (var i in tmpArr)
								console.log("tmpArr2:", i, " ", tmpArr[i])
							for (var i in ids)
								console.log("ids2:", i, " ", ids[i])
						}
	
						//没有选中任何一行
						if (checkedArr.length == 0) {
							layui.layer.msg('请选择要删除行');
							return;
						}
	
						layui.layer.confirm('真的删除么', function(index) {
							layui.layer.close(index);
							//ajax从数据库删除 ids.toString();
							// for (var i in checkedArr)
							// 	console.log("checkedArr33:", i, " ", checkedArr[i])
							if(bol){
									$.each(checkedArr, function(k) {
									$("tr[data-index=" + checkedArr[k] + "]").remove();
									});
							}else{
									for(var i in arr_obj)
									arr_obj[i].del()
								}
						
								
							
							layui.layer.msg('删除成功');
						});
	
					});
	
				});
	
				// $("input[type='checkbox']").removeAttr("checked");
			</script>
	</body>
</html>
